<template>
    <VueCustomeForm ref="VueCustomeFormRef" :fields="fields" :label-width="150">
        <template v-slot:btnGroups>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </template>
    </VueCustomeForm>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { VueCustomeForm } from 'vue-custome-components'
import { getFields } from './form.js'
const fields =  getFields() as any

const VueCustomeFormRef = ref()
const submitForm = () => {
    VueCustomeFormRef?.value.validateForm((data:  any)=>{
        console.log(data)
    })
}
const resetForm = () => {
    VueCustomeFormRef?.value.resetForm()
}
onMounted(()=>{
    VueCustomeFormRef.value.displayData({
        username: 'vue3',
        jh: { label: '是', value: 1 },
        yc:{ label: '城市1', value: 1 },
        date: '2023-12-07',
        stateTime: '2023-12-08',
        endTime: '2023-12-28',
        jn: [1,2],
        sex: 1,
        switch: 1,
        des: 'xsdeeeeee'
    })
})
</script>